import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { NavBar, Tabs, Empty, Cell, SubmitBar, Tag } from 'react-vant';
import { Edit } from '@react-vant/icons'
import './order.css'
import { Add } from '@react-vant/icons'
import { DefaultAddress } from '../../axios';
import { useSelector } from 'react-redux';
export default function Order() {
  let { userId } = useSelector(state => state.user)
  let [ data,setData ] = useState({})
  useEffect(() => {
    DefaultAddress({userid:userId}).then(res => {
      console.log(res);
      if(res.data.code === '200'){
        setData(res.data.data[0])
      }
    })
  },[])
    let navigate = useNavigate()
    const go = () => {
        
    }
    console.log(data);
  return (
    <div className='order-box'>
         <NavBar
            title="订单页"
            leftText="返回"
            onClickLeft={() => navigate(-1)}
        />

        {data == undefined && <Cell
          center
          title= '添加地址'
          icon={<Add style={{fontSize:30,color:'blue'}} />}
          isLink
          onClick={() => navigate('/address')}
          className='order-cell'
        />}
        
        {data != undefined && <div className='address-div' onClick={() => navigate('/address')}>
        <div className='address-cen'>
            <div className='address-top'>
                <span className='address-top-left'>{data.name}</span>
                <span>{data.tel}</span>
                <Tag color='red'
                textColor='withe' round type="primary" className='address-tag'>默认</Tag>
              </div>
              <div className='address-bot'>
                {data.addressDetail}
            </div>
          </div>
          <Edit style={{fontSize:22}} />
          </div> }

        <Empty image="error" description="暂无订单" />
        <div className="demo-submit-bar"><SubmitBar price="0" onSubmit={go} buttonText="提交订单" /></div>
    </div>
  )
}
